<template>
  <div class="main-box">
    <van-nav-bar title="编辑资料" class="header" />
    <div class="empty"></div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <!-- 用户名 -->
        <van-field
          v-model="user.userName"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <!-- 头像 -->
        <van-field name="uploader" label="选择头像">
          <template #input>
            <van-uploader v-model="uploader" />
          </template>
        </van-field>
        <!-- 性别 -->
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="user.sex" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!-- 生日 -->
        <van-field
          v-model="user.birthday"
          is-link
          readonly
          name="datePicker"
          label="生日"
          placeholder="点击选择日期"
          @click="showPicker = true"
        />
        <van-popup :show="showPicker" position="bottom">
          <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { userDetail } from "@/api/userAPI";

export default {
  name: "UserInfoEdit",
  data() {
    return {
      user: {
        id: "",
        userName: "",
        icon: "",
        realname: "",
        sex: true,
        birthday: "",
      },
      showPicker: false,
      uploader: [],
    };
  },
  created() {
    this.initUserInfo();
  },
  methods: {
    async initUserInfo() {
      // 需要基于 dish-id 发送请求，获取编辑对应的详情数据，进行回显
      const {
        data: { success = false, errorMsg = "", data: res, total = 0 },
      } = await userDetail();
      for (let key in res) {
        this.user[key] = res[key];
      }
    },
    onSubmit() {},
    onConfirm() {
      this.value = time;
      this.showPicker = false;
    }
  },
};
</script>

<style lang="less" scoped>
.header {
  position: fixed;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  background-color: #07c160;
}
.empty {
  height: 54px;
  width: 100%;
}
</style>